<template>
	<div class="flex items-center h-[48px] bg-[#f8f8f8] rounded-[10px] p-4 text-[14px] justify-between" :class="$attrs">
		<span class="text-[#222] flex-shrink-0">{{ title }}</span>
		<slot name="default" />
	</div>
</template>

<script setup lang="ts">
defineProps({
	title: {
		type: String,
		default: '',
	},
});
</script>

<style lang="scss" scoped>
@import '/@/theme/mixins/index.scss';
.ellipsis {
	@include text-ellipsis(1);
}
</style>
